// ==================== 设计系统变量 ====================

// -------------------- 颜色系统 --------------------
// 主色
$primary-color: #6366f1;
$primary-light: #818cf8;
$primary-lighter: #a5b4fc;
$primary-dark: #4f46e5;
$primary-darker: #4338ca;

// 辅助色
$secondary-color: #8b5cf6;
$success-color: #10b981;
$warning-color: #f59e0b;
$error-color: #ef4444;
$info-color: #3b82f6;

// 中性色
$text-primary: #111827;
$text-secondary: #6b7280;
$text-tertiary: #9ca3af;
$text-disabled: #d1d5db;

// 背景色
$bg-primary: #ffffff;
$bg-secondary: #f9fafb;
$bg-tertiary: #f3f4f6;
$bg-hover: #f3f4f6;

// 边框色
$border-light: #f3f4f6;
$border-normal: #e5e7eb;
$border-dark: #d1d5db;

// 渐变色
$gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
$gradient-secondary: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
$gradient-warm: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
$gradient-cool: linear-gradient(135deg, #06b6d4 0%, #3b82f6 100%);
$gradient-purple: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
$gradient-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
$gradient-bg: linear-gradient(135deg, #faf5ff 0%, #f0f9ff 100%);

// -------------------- 间距系统 --------------------
$spacing-xs: 4px;
$spacing-sm: 8px;
$spacing-md: 16px;
$spacing-lg: 24px;
$spacing-xl: 32px;
$spacing-2xl: 48px;
$spacing-3xl: 64px;
$spacing-4xl: 96px;

// -------------------- 圆角系统 --------------------
$radius-sm: 6px;
$radius-md: 10px;
$radius-lg: 16px;
$radius-xl: 20px;
$radius-2xl: 24px;
$radius-full: 9999px;

// -------------------- 阴影系统 --------------------
$shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
$shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
$shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
$shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
$shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.15);
$shadow-2xl: 0 24px 48px rgba(0, 0, 0, 0.18);

// 特殊阴影
$shadow-primary: 0 8px 24px rgba(99, 102, 241, 0.25);
$shadow-primary-hover: 0 12px 32px rgba(99, 102, 241, 0.35);
$shadow-card: 0 2px 8px rgba(0, 0, 0, 0.04);
$shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.12);

// -------------------- 字体系统 --------------------
$font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

// 字号
$font-xs: 12px;
$font-sm: 14px;
$font-base: 16px;
$font-lg: 18px;
$font-xl: 20px;
$font-2xl: 24px;
$font-3xl: 30px;
$font-4xl: 36px;
$font-5xl: 48px;
$font-6xl: 60px;

// 字重
$font-normal: 400;
$font-medium: 500;
$font-semibold: 600;
$font-bold: 700;
$font-extrabold: 800;

// 行高
$line-height-tight: 1.2;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// -------------------- 动画系统 --------------------
$transition-fast: 0.15s;
$transition-base: 0.3s;
$transition-slow: 0.5s;

$ease-in: cubic-bezier(0.4, 0, 1, 1);
$ease-out: cubic-bezier(0, 0, 0.2, 1);
$ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
$ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

// 通用过渡
$transition-all: all $transition-base $ease-in-out;
$transition-transform: transform $transition-base $ease-in-out;
$transition-opacity: opacity $transition-base $ease-in-out;
$transition-color: color $transition-base $ease-in-out;
$transition-shadow: box-shadow $transition-base $ease-in-out;

// -------------------- 断点系统 --------------------
$breakpoint-xs: 480px;
$breakpoint-sm: 576px;
$breakpoint-md: 768px;
$breakpoint-lg: 992px;
$breakpoint-xl: 1200px;
$breakpoint-2xl: 1600px;

// -------------------- Z-index 系统 --------------------
$z-dropdown: 1000;
$z-modal: 1050;
$z-popover: 1100;
$z-tooltip: 1150;
$z-notification: 1200;

// -------------------- 布局系统 --------------------
$header-height: 64px;
$footer-height: 70px;
$sidebar-width: 240px;
$content-max-width: 1400px;

// -------------------- Mixins --------------------
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

@mixin flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@mixin card {
  background: $bg-primary;
  border-radius: $radius-lg;
  box-shadow: $shadow-card;
  transition: $transition-all;

  &:hover {
    box-shadow: $shadow-card-hover;
    transform: translateY(-4px);
  }
}

@mixin text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin text-clamp($lines: 2) {
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

@mixin responsive($breakpoint) {
  @media (max-width: $breakpoint) {
    @content;
  }
}

// 响应式容器
@mixin container {
  max-width: $content-max-width;
  margin: 0 auto;
  padding: 0 $spacing-lg;

  @include responsive($breakpoint-md) {
    padding: 0 $spacing-md;
  }
}

// 毛玻璃效果
@mixin glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

// 图片遮罩层
@mixin image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: $gradient-overlay;
  opacity: 0;
  transition: $transition-opacity;

  &:hover {
    opacity: 1;
  }
}

